<template>
	<div class="div">
		<div class="div2">
			<h5>商品二级类型</h5>
			<h6>需要自己根据后端数据， 将 pid 相同2级节点进行处理</h6>
		</div>
		<hr>
		<div class="div3">

			<el-table :data="btn" border style="width: 100%;">
				<el-table-column prop="id" label="一级类型ID" min-width="160">
				</el-table-column>
				<el-table-column prop="prio" label="顺序" min-width="160">
				</el-table-column>

				<el-table-column prop="name" label="一级类型名称" min-width="160">
				</el-table-column>

				<el-table-column fixed="right" label="添加子类型" width="100">
					<template slot-scope="scope">
						<el-button type="text" size="small" @click="add(scope.row.id)">添加</el-button>
					</template>
				</el-table-column>
				<el-table-column label="二级节点信息" min-width="160">
					<template slot-scope="scope" @change="handleChange2">
						<el-table :data="scope.row.childList">
							<el-table-column prop="name" min-width="160">
							</el-table-column>
							<el-table-column fixed="right" label="修改" width="100">
								<template slot-scope="scope">
									<el-button type="text" size="small" @click="goUpdate(scope.row.id)">修改</el-button>
								</template>
							</el-table-column>

							<el-table-column fixed="right" label="删除" width="100">
								<template slot-scope="scope">
									<el-button type="text" size="small" @click="remove(scope.row.id)">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</template>
				</el-table-column>
			</el-table>
			<el-dialog title="类型信息" :visible.sync="centerDialogVisible" width="30%" center>
				<h4>父节点ID：{{t.id}}</h4>
				<h4>父节点名：{{t.name}}</h4>
				<hr>
				<el-form ref="type" :model="type" label-width="100px">
				 
			 	<el-form-item label="二级类型名称">
			 		<el-input v-model="type.name"></el-input>
			 	</el-form-item>
			 	
			 	<el-form-item label="显示顺序">
			 		<el-input v-model="type.prio"></el-input>
			 	</el-form-item>
			 	<el-button @click="updateType()">{{act}}</el-button>
			 </el-form>
				</el-table>
				
			</el-dialog>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Firstleveltype",
		data() {
			return {
				booktypes: [],
				centerDialogVisible: false,
				type: {},
				t:{},
				types: [],
				act: ''
			}
		},
		computed: {
			btn() {
				this.booktypes = [];
				this.types.forEach((item, i) => {
					if (item.pid == 0) {
						console.log(1111);
						this.booktypes.push({
							id: item.id,
							name: item.name,
							prio: item.prio,
							pid:item.pid
						})
					}
				})
				console.log(this.booktypes);
				console.log(this.types);
				this.booktypes.forEach((item, i) => {
					let n = [];
					// console.log(item.id);
					this.types.forEach((j, i) => {
						// console.log(j.id);
						if (j.pid > 0 && j.pid == item.id) {
							// console.log(j.pid);
							// console.log(item.id);
							n.push({
								id: j.id,
								name: j.name,
								prio: j.prio,
							})
						}
					})
					item.childList = n;
					console.log(n);

					// console.log(n);
				})
				console.log(this.booktypes);
				return this.booktypes;
			}
		},
		methods: {
			remove(id){
				this.$get("/api/adm/type/remove/" + id).then((resp) => {
					this.$message({
						message:resp.data.msg,
						type:'success'
					})
				})
			},
			add(id) {
				this.act = '添加';
				this.type = {
					id: 0,
					prio: 100,
					pid:id
				};
				this.centerDialogVisible = true;
				this.$get("/api/adm/type/findById/" + id).then((resp) => {
					console.log(resp.data);
					this.t = resp.data.data;
					console.log(this.t);
				})
			},
			updateType() {
				this.centerDialogVisible = false;
				console.log(this.booktypes);
				console.log(this.type);
				this.$postk("/api/adm/type/add", this.type).then((resp) => {
					console.log(resp.data);
					console.log(this.type);
					this.booktypes = resp.data.data;
				})
			},
			handleChange2(value) {
				console.log(value);
			},
			goUpdate(id) {
				console.log(id);
				this.centerDialogVisible = true;
				this.act = '修改';
				this.$get("/api/adm/type/findById/" + id).then((resp) => {
					console.log(resp.data);
					this.type= resp.data.data;
					this.$get("/api/adm/type/findById/" + this.type.pid).then((resp) => {
						console.log(resp.data);
						this.t = resp.data.data;
				})
			})
			},
			book() {
				this.$get("/api/adm/type/findAll2").then((resp) => {
					console.log(resp.data);
					this.types = resp.data.data;
				})
			},

		},
		mounted() {
			
			console.log(this.types);
			this.book();
		}
	}
</script>

<style scoped>
	.div {
		width: 100%;
	}

	.div .div2 {
		width: 95%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 4vh auto;
	}

	.div .div2 h5 {}

	.div hr {
		width: 95%;
		margin: 1vh auto;
		border: 1px solid #1E9FFF;
	}
</style>
